<template >
  <div class="pi">

    <div class="head">
      <h2>PI</h2>
      <div class="head-ctrl">
        <div class="order-number">
          {{businessformNO}}
        </div>
        <!-- <el-button type="primary">导出</el-button> -->
      </div>
    </div>

    <div class="pi-head">
      <p><span>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</span></p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
      <h2>PROFORMA INVOICE</h2>
    </div>

    <div class="pi-head-2">
      <el-form :inline="true">
        <el-form-item label="Company: ">
          <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_company" ></el-input>
        </el-form-item>

        <el-form-item label="No: ">
          <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_no"></el-input>
        </el-form-item>
        <el-form-item label="Address: ">
          <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_address"></el-input>
        </el-form-item>

        <el-form-item label="Date: ">
          <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"   @change="mustUpdate2"   v-model="bp_date" ></el-date-picker>
        </el-form-item>
      </el-form>

      <!-- <el-form :inline="true">
        <el-form-item  label="Trade Term: ">
          <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_tradeTerm" ></el-input>
        </el-form-item>
      </el-form> -->
    </div>

      <!-- :summary-method="getTableSummaries" show-summary -->
    <div class="pi-table">
      <p class="table-title">
        <span>Ⅰ. PRICE INFORMATION	</span></p>
      <el-table :data="piTableData" @cell-click="clickEditTableCell"  border style="width: 100%"
      :span-method="spanMethod">

        <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>

        <el-table-column prop="bp_table1_products" label="Products" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">

              <el-tooltip effect="dark"  :content="scope.row.bp_table1_products || '暂无内容'"  placement="top">
                <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="scope.row.bp_table1_products" ></el-input>
              </el-tooltip>

            </span>
          </template>
        </el-table-column>

        <el-table-column prop="bp_table1_hscode" label="HS CODE" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">
              <el-tooltip effect="dark"  :content="scope.row.bp_table1_hscode || '暂无内容'"  placement="top">
                <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="scope.row.bp_table1_hscode" ></el-input>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="bp_table1_description" label="Model Description" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">
              <el-tooltip effect="dark"  :content="scope.row.bp_table1_description || '暂无内容'"  placement="top">
                <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="scope.row.bp_table1_description" ></el-input>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>


        <el-table-column label="Quantity" min-width="100">
          <el-table-column prop="bp_table1_quantity" label="PSD">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <el-input-number @change="handleTableNumberChange"  :disabled="!editable"  v-model="scope.row.bp_table1_quantity" :min="0" :controls="false"></el-input-number>
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="Unit Price" :min-width="200" :render-header="currencySel('Unit Price')">
          <el-table-column prop="bp_table1_price" label="USD"  :render-header="currentSelEN('')">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <el-input-number @change="handleTableNumberChange" :disabled="!editable"  v-model="scope.row.bp_table1_price" :min="0"  :controls="false"></el-input-number>
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column   label="Total price" min-width="100">
          <el-table-column prop="bp_table1_lineAmount" label="USD" :render-header="currentSelEN('')">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <el-input-number v-if="scope.row.specialColumn"  :disabled="true"  v-model="scope.row.bp_table1_lineAmount" :min="0"   :controls="false"></el-input-number>
                <el-input-number v-else @change="handleTableNumberChange2"  :disabled="!editable"  v-model="scope.row.bp_table1_lineAmount" :min="0"  :controls="false"></el-input-number>
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
        v-if="editable"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="addNewLine(scope.$index, data.bp_table1)" type="text" size="small">添加</el-button>
          <el-button @click="removeCurrentLine(scope.$index, data.bp_table1)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>


      </el-table>
    </div>

    <div class="extra-table">
          <el-row class="extra-money">
            <el-col :span="8"><div>Deposit定金</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><input v-model="bp_depositMoney" @input="handleExtraMoney('bp_depositMoney', $event)"/></el-col>
         </el-row>

        <el-row class="extra-money">
            <el-col :span="8"><div>Balance 尾款</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><div><input v-model="bp_balanceMoney" @input="handleExtraMoney('bp_balanceMoney', $event)"/></div></el-col>
         </el-row>
    </div>

    <!-- <div class="pi-head-3">
      <p class="table-title"><span>Ⅱ.TRADING TERMS</span></p>
      <p class="table-title">
        <span>1. THE NAME OF THE SELLER COMPANY BANKERS IS AS BELOW</span></p>
      <div>
        <p><span>Beneficiary：</span>		TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</span></p>
          <p><span>Account No.: </span>			1000000010120100506972</span></p>
          <p><span>Address: </span>			NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
          TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
          <p><span>Bank：</span>			CHINA ZHESHANG BANK BEIJING BRANCH</span></p>
          <p><span>Bank address: </span>			NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA</span></p>
          <p><span>SWIFT CODE:</span>	 		ZJCBCN2N</span></p>
      </div>

        <p class="table-title"><span>2.COUNTRY AND MANUFACTURERS:</span> <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_countryOfOrgin"></el-input></p>
        <p class="table-title"><span>3.PACKING: To be packed in standard packing.</span></p>
        <p class="table-title"><span>4.PORT OF SHIPMENT：</span><el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_portOfLoad"></el-input></p>
        <p class="table-title"><span>5.PORT OF DESTINATION：</span> <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_portOfDestination"></el-input></p>
        <p class="table-title"><span>6.INSURANCE：</span> Without Insurance of the shipment by sea;</p>
        <p class="table-title"><span>7.Remark: </span><el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_paymentTerm"></el-input></p>
      </div> -->



      <div class="pi-head-3">
      <p class="table-title"><span>Ⅱ.TRADING TERMS</span></p>
      <p class="table-title">
        <span>1.Country of Origin: </span>
         <input type="text" v-model="this.data.bp_countryOrigin" placeholder="请输入相关内容" >
      </p>

      <p class="table-title">
        <span>2. Trade Terms：</span>
         <input type="text" v-model="data.bp_tradeTerm" placeholder="请输入相关内容" >
      </p>

      <p class="table-title"><span>3.Payment Term:	</span></p>
      <p>3.1Contract Deposit <input type="text" placeholder="请输入相关内容"  v-model="bp_depositMoney"></p>
      <p>
        The buyer shall pay the deposit within 2 weeks from the date of contract signed. 
        If the deal cannot be continued for any reason by the buyer, the seller will not refund
         the deposit unless the seller's supplier has made the refund in advance.					
      </p>

      <p>3.2 Balance Payment<input type="text" placeholder="请输入相关内容"  v-model="bp_balanceMoney"></p>
      <p>
          The buyer shall pay the balance within 90 days started from the day appointed by 《Payment Notice》. 
          If the buyer delay to pay the balance, should be fined by interest of  0.5% of the balance amount per day.									
      </p>

      <p>3.3. Beneficiary Payment Route</p>
      <p>
        <span>Beneficiary Company：	</span>
        <input type="text"  placeholder="请输入相关内容" :readonly="!editable" v-model="data.bp_benCompany">
      </p>

      <p>
        <span>Account No: 		</span>
        <input type="text" placeholder="请输入相关内容" :readonly="!editable"  v-model="data.bp_AccountNo">
      </p>

      <p>
        <span>Company Address:	</span>
        <input type="text" placeholder="请输入相关内容" :readonly="!editable"  v-model="data.bp_CompanyAddress">
      </p>

      <p>
        <span>Bank：	</span>
        <input type="text" placeholder="请输入相关内容" :readonly="!editable"  v-model="data.bp_bank">
      </p>

      <p>
        <span>Bank address: 		</span>
        <input type="text" placeholder="请输入相关内容" :readonly="!editable"  v-model="data.bp_bankAddress">
      </p>

      <p>
        <span>SWIFT CODE:	</span>
        <input type="text" placeholder="请输入相关内容" :readonly="!editable"  v-model="data.bp_swiftCode">
      </p>

      <p>
        Remark: The Buyer must indicate the sales contract number, invoice number and payment purpose (e.g. deposit/prepayment/balance payment, etc.) in the bank slip.	
      </p>


        <p class="table-title"><span>4.COUNTRY AND MANUFACTURERS:</span> <input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_countryAndManu"/></p>
        <p class="table-title"><span>5.PACKING:</span> <input type="text" placeholder="请输入相关内容"  :readonly="!editable"  v-model="data.bp_packing"  /></p>
        <p class="table-title"><span>6.PORT OF DESTINATION：</span><input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_portOfDestination" /></p>
        <p class="table-title"><span>7.INSURANCE：</span> <input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_insurance" /> </p>
      </div>



  <div class="upload">
    <p class="upload-hint">票据/附件</p>
    <div>
      <div class="upload-btn">
        <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
        <el-button :disabled="!editable"  type="primary">选择附件</el-button>
      </div>

      <ul class="upload-files">
        <li @mouseover="handleOver(item)" :key="index"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles">
          <span @click="download(item.id, $event)">{{item.name}}</span>
          <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
          <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
        </li>
      </ul>
    </div>
  </div>

  </div>

</template>

<script>

import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js'

export default {
  methods: {
    indexMethod(value){
      let lines = this.data.bp_table1.length;
      if ( lines - 1 === value){
        return '合计Total';
      }
      return value + 1;
    },

    mustUpdate(){
      this.$forceUpdate();
    },

    mustUpdate2(){
      this.data.bp_date = this.bp_date;
      this.$forceUpdate();
    },

    selectFiles(event){
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1,id: res.data.datas[0].id});
        });

        _this.$forceUpdate();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    addNewLine(currentIndex, table){

      this.specialClick = true;
      let newLine = _.cloneDeep(table[currentIndex]);

      // for (let prop in newLine) {
      //   newLine[prop] = '';
      // }

      table.splice(currentIndex + 1, 0, newLine);
      this.handleTableNumberChange();
    },
    removeCurrentLine(currentIndex, table){
      this.specialClick = true;
      if (table.length > 2){
        table.splice(currentIndex, 1);
      }
      this.handleTableNumberChange();
    },
    spanMethod({row, column, rowIndex, columnIndex}){
      let lines = this.data.bp_table1.length;
      if (lines - 1 === rowIndex){
        switch (columnIndex){
          case 0:
          return [1, 6];
          break;
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 7:
          return [0, 0];
          break;
          case 6:
          return [1,2];
        }
      }
    },

    clickEditTableCell(row, column, cell, event) {
      // console.log(row.customIndex);
      if (row){
        this.clickTableIndex = row.customIndex;
      }

      if (this.tableChanged) {
        this.updateTable();
        this.$forceUpdate();
        this.tableChanged = false;
      }
    },
    handleTableNumberChange(){

      if (!this.specialClick) {
        this.tableChanged = true;
        this.clickEditTableCell();
      } else {
        this.tableChanged = false;
        this.specialClick = false;

        let current = this.data.bp_table1, lines = current.length;
        for (let i = 0; i < lines - 1; i++) {
          current[i].customIndex = i;
        }
      }
    },

    handleTableNumberChange2(){
      this.isUpdateAmount = true;
      this.updateAmount();
      this.$forceUpdate();
    },
    updateAmount(){
      /*
      let current = this.data.bp_table1, amounts = 0;
      let lines = current.length;

      for (let i = 0; i < lines - 1; i++) {
        amounts += parseFloat(current[i].bp_table1_lineAmount);
      }

      amounts = amounts.toFixed(2);
      current[lines - 1].bp_table1_lineAmount = amounts +  '';
      */

      this.updateTable(true);
    },
    updateTable(isAmount){
      let current = this.data.bp_table1, amounts = 0;
      let lines = current.length, correctValue = 0;


      for (let i = 0; i < lines - 1; i++) {

        current[i].bp_table1_quantity = parseInt(current[i].bp_table1_quantity);
        current[i].bp_table1_price = toFixed(current[i].bp_table1_price, 2);

        correctValue = toFixed((current[i].bp_table1_quantity * current[i].bp_table1_price), 2);

        if (current[i].bp_table1_lineAmount && (current[i].bp_table1_lineAmount != correctValue)) {
        } else {
          current[i].bp_table1_lineAmount = toFixed(correctValue, 2);
        }

        if ((i == this.clickTableIndex)  && (!isAmount)){
          current[i].bp_table1_lineAmount = toFixed(correctValue, 2);
        }

        current[i].bp_table1_lineAmount = toFixed(current[i].bp_table1_lineAmount, 2);

        amounts += parseFloat(current[i].bp_table1_lineAmount);
        current[i].specialColumn = false;
        current[i].customIndex = i;
      }

      amounts = toFixed(amounts, 2);
      current[lines - 1].bp_table1_lineAmount = amounts +  '';
    },


    /**选择币种 */
    currencySel(name){


        return (h, {column, $index}) => {
        let self = this;
        var selAttr = {};
        if (!this.editable){
         selAttr.disabled = 'disabled';
        }
        return  h("div", {
          attrs: {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
            value: self.currencyValue
          },
          on: {
            change: function(event){
              self.currencyValue = event.target.value;
              self.data.bp_currencyValue = event.target.value;
            }
          }
          },[
            h("option", "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    },

    currentSelEN(name){
      return (h, {column, $index}) => {
        let temp;
        switch (this.currencyValue){
          case '人民币':
          temp = 'RMB';
          break;
          case '美元':
          temp = 'USD';
          break;
          case '欧元':
          temp = 'EUR';
          break;
          case '加元':
          temp = 'CAD';
          break;
        }
        return h('div',null, `${name}${temp}`);
      }
    },

    //定金，尾款
    handleExtraMoney(name, event){
      this[name] = event.target.value;
      this.data[name] = event.target.value;
    }
  },

  created(){
    this.bp_date = this.data.bp_date;

    this.data.relatedChangedStatusPR = 0;
    this.oldRelatedPR = _.cloneDeep(this.data.bp_table1);
    this.newRelatedPR = _.cloneDeep(this.data.bp_table1);
  },

  updated(){


    if (this.isUpdateAmount){
      this.isUpdateAmount = false;
      this.updateAmount();
    } else {
      this.updateTable();
    }

    this.newRelatedPR = _.cloneDeep(this.data.bp_table1);
    if (!_.isEqual(this.newRelatedPR, this.oldRelatedPR)) {
      this.data.relatedChangedStatusPR = 1;
      this.oldRelatedPR = _.cloneDeep(this.newRelatedPR);
    }

    this.bp_date = this.data.bp_date;
    let _this = this;

    if (this.clickTab  && this.relation) {


      //第一次填写,使用关联的值
      if (!this.fromOther) {

        this.data.bp_currencyValue = this.relatedData.bf_currencyValue;
        this.currencyValue = this.relatedData.bf_currencyValue;

        this.data.bp_depositMoney = this.relatedData.bf_depositMoney;
        this.data.bp_balanceMoney = this.relatedData.bf_balanceMoney;

        this.bp_depositMoney = this.relatedData.bf_depositMoney;
        this.bp_balanceMoney = this.relatedData.bf_balanceMoney;

        if (this.relatedData.hasClicked) {
          let currRelated = {};

          this.relatedProp.forEach( e => {
            currRelated[e] = _.cloneDeep(_this.relatedData[e]);
          })


          if (!_.isEqual(currRelated, this.oldRelated)) {

            //使用关联的表的数据作为默认值
            this.data.bp_company = this.relatedData.bf_buy_name;
            this.data.bp_no = this.relatedData.bf_orderNumber
            this.data.bp_address = this.relatedData.bf_buy_address;
            this.data.bp_date = this.relatedData.bf_orderDate;
            this.data.bp_tradeTerm = this.relatedData.bf_tradeTerm;
            this.data.bp_countryOfOrgin =  "中国 China";
            this.data.bp_portOfLoad =  this.relatedData.bf_portOfLoad;
            this.data.bp_portOfDestination = this.relatedData.bf_portOfDestination;
            this.data.bp_currencyValue = this.relatedData.bf_currencyValue;




            // this.data.bp_table1.splice(2);
            this.data.bp_table1.splice(this.relatedData.bf_table1.length - 1);
            for (let i = 0; i < this.relatedData.bf_table1.length - 1; i++) {

              if (!this.data.bp_table1[i]){
                this.data.bp_table1.push({});
              }
              (this.data.bp_table1[i]).bp_table1_products =  (this.relatedData.bf_table1[i]).bf_table1_product;
              (this.data.bp_table1[i]).bp_table1_description = (this.relatedData.bf_table1[i]).bf_table1_description;
              (this.data.bp_table1[i]).bp_table1_quantity = parseInt((this.relatedData.bf_table1[i]).bf_table1_quantity);
              (this.data.bp_table1[i]).bp_table1_price = toFixed((this.relatedData.bf_table1[i]).bf_table1_price, 2);
              (this.data.bp_table1[i]).bp_table1_lineAmount = toFixed((this.relatedData.bf_table1[i]).bf_table1_lineAmount, 2);
            }


            //将上一次关联的值保存
            this.oldRelated = _.cloneDeep(currRelated);
            this.relatedData.relatedChangedStatusPI = 2;
          }

        } else {
          this.relatedProp.forEach( e => {
            _this.oldRelated[e] = _.cloneDeep(_this.relatedData[e]);
          });
        }
      } else {
        this.currencyValue = this.data.bp_currencyValue;
        this.bp_depositMoney = this.data.bp_depositMoney;
        this.bp_balanceMoney = this.data.bp_balanceMoney;
      }


      this.clickTab = false;
      this.$forceUpdate();

    } else {
      this.relatedProp.forEach( e => {
        _this.oldRelated[e] = _.cloneDeep(_this.relatedData[e]);
      });
    }

    
  },
  computed: {

    piTableData(){

      let current = this.data.bp_table1, amounts = 0;
      let lines = current.length,correctValue = 0;

      for (let i = 0; i < lines - 1; i++) {

        current[i].bp_table1_quantity = parseInt(current[i].bp_table1_quantity);
        current[i].bp_table1_price = toFixed(current[i].bp_table1_price, 2);

        correctValue = toFixed((current[i].bp_table1_quantity * current[i].bp_table1_price), 2);

        if (current[i].bp_table1_lineAmount && (current[i].bp_table1_lineAmount != correctValue)) {
        } else {
          current[i].bp_table1_lineAmount = toFixed(correctValue, 2);
        }

        current[i].customIndex = i;
      }

      for (let i = 0; i < lines - 1; i++) {
        amounts += parseFloat(current[i].bp_table1_lineAmount);
      }

      amounts = toFixed(amounts, 2);
      current[lines - 1].bp_table1_lineAmount = amounts +  '';

      current[lines - 1].specialColumn = true;
      return current;
    }
  },

  props: {
    businessformNO: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
    relatedData: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    relation: {
      type: Boolean,
      required: true
    },
    fromOther: {
      type: Boolean,
      required: true
    }
  },

  data(){
    return {
      clickTab: false,
      clickTableIndex: -1,
      tableChanged: false,
      specialClick: false,
      isUpdateAmount: false,
      bp_date: '',
      oldRelated: {},
      relatedProp: [
        "bf_buy_name",
        "bf_orderNumber",
        "bf_buy_address",
        "bf_orderDate",
        "bf_tradeTerm",
        "bf_portOfLoad",
        "bf_portOfDestination",
        "bf_table1"
      ],
      oldRelatedPR: [],
      newRelatedPR: [],
      currencyValue: '人民币',
      bp_depositMoney: 0,
      bp_balanceMoney: 0
    }
  }
}
</script>

<style lang="scss">
.pi {
  padding: 20px;
  border: 1px solid #999;

  font-size: 15px;
  line-height: 30px;

   .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
  }

  p {
    padding: 5px 0;

    span {
      font-weight: bolder;
    }
  }

  .export {
    float: right;
  }


  .head {
    h2 {
      text-align: center;
    }

    .head-ctrl {
      height: 60px;
      .order-number {
        padding: 16px 0px;
        float: left;
      }
      button {
        float: right;
      }
    }
  }
  .table-title {
      padding: 10px 0;
  }

  .pi-head {
    text-align: center;
    h2 {
      padding: 20px;
    }
  }

  .pi-head-2 {
    .el-form--inline .el-form-item__label {
      width: 120px;
      text-align: left;
    }

    .el-form--inline .el-form-item {
      margin-right: 100px;
    }
    .el-form-item__content {
      width: 250px;
    }

    .el-date-editor.el-input {
      width: 250px;
    }
  }

  .pi-table {

    td {
      border: 1px solid #e6ebf5;
    }

    .el-table__body-wrapper {
      overflow: hidden;
    }


    .el-table thead.is-group th {
      background: #e6e6e6;
    }

    .cell-edit-input {
        .el-input__inner {
            border: none;
            background: transparent;
            padding: 0;
            text-align: center;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            width: 20px;

            border: none;
            background: transparent;
        }

        .el-input-number {
            width: 100%;
            min-width: 80px;
        }
    }

  }


  .extra-table {
          .extra-money {
            border: 1px solid #e6ebf5;
            text-align: center;
            color: #5a5e66;

            &:nth-child(1){
              border-top: none;
            }

            .el-col:nth-child(2){
              border-left: 1px solid #e6ebf5;
              border-right: 1px solid #e6ebf5;
            }

            input {
              width: 90%;
              border: none;
              outline: none;
              text-indent: 1em;
              color: #5a5e66;
            }
          }
  }




  .pi-head-3 {
    .el-input {
      width: 500px;

      .el-input__inner {
        border: none !important;
      }
    }

    input {
      border: none;
      outline: none;
      width: 60%;
    }
  }

  .upload {
    >div {
      border: 1px solid #999;
      padding: 20px 0px 40px 20px;
    }

    .upload-btn {
      position: relative;
      >input {
        opacity: 0;
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .upload-files {

        > li {
            width: 300px;
            padding: 10px 0;
            transition: all 0.5s linear;

            &:hover {

              >span {
                color: #409EFF;
              }
            }
          }

        font-size: 16px;
        span {
            padding: 0 10px;
            cursor: pointer;
            display: inline;
        }
        span.el-icon-close:hover {
            cursor: pointer;
        }
    }
    .upload-hint {
      font-size: 20px;
      margin: 15px 0px  ;
    }
  }

}
</style>
